<template>
  <page-meta
    background-color="#ffffff"
    page-style="background-color: #ffffff;min-height:100%"
  >
    <navigation-bar
      front-color="#000000"
      :background-color="'#ffffff'"
    />
  </page-meta>
  <!-- eslint-disable-next-line vue/no-multiple-template-root -->
  <view>
    <!-- 搜索 -->
    <view
      class="x-white-bg x-flexp-row x-pa"
    >
      <view
        class="x-fs x-flexp-ai x-mr"
        @click="goCitys"
      >
        <view class="x-mr-sm">
          <u-icon
            name="map-fill"
            :color="theme.uniColorPrimary"
          />
        </view>
        <view class="x-mr-sm x-line-1">
          {{ locationInfo.address_component&&locationInfo.address_component.city||'定位中' }}
        </view>
        <view>
          <u-icon
            name="arrow-down"
          />
        </view>
      </view>
      <view class="x-flex-1 x-mr">
        <u-search
          v-model="keyword"
          shape="round"
          :show-action="false"
          placeholder="请输入地址"
          @search="search"
        />
      </view>
    </view>
    <view class="x-mt">
      <u-line />
    </view>

    <!-- 当前 -->
    <view 
      class="x-flexp-row-between-center x-pa"
      @click="setSelectedLocationCur()"
    >
      <view>
        {{ locationInfo.formatted_addresses&&locationInfo.formatted_addresses.recommend||'定位中' }}
      </view>
      <view
        class="x-flex-none x-flexp-ai x-text-light"
        @click.stop="getLocation(true)"
      >
        <view class="x-mr-sm">
          <u-icon name="map" />
        </view>
        <view>重新定位</view>
      </view>
    </view>

    <!-- 我的 -->
    <!-- <view class="x-pl x-pr x-fw-lg">
      我的地址
    </view>
    <u-empty /> -->
    <!-- 附近地址 -->
    <view class="x-pl x-pr x-fw-lg">
      附近地址
    </view>
    <view class="x-pa">
      <view
        v-for="(v,i) in pois"
        :key="i"
        class="x-bb x-pa"
        @click="setSelectedLocationPoi(v,i)"
      >
        <view>{{ v.title }}</view>
        <view class="x-mt-sm x-fs-sm x-text-light">
          {{ v.address }}
        </view>
      </view>
    </view>
  </view>
</template>
    
<script>
  import { initLocation, setSelectedLocation, clearSelectedLocation, getLocationByCity, geocoderSearch } from '../location/locations'

  export default {
    data() {
      return {
        theme: this.$x.theme,
        keyword: '',
        locationInfo: {}
      }
    },
    onLoad() {
      this.getLocation()
      uni.$on('selectCity',city=>{
        // console.log('selectCity',city)
        if(!city) return
        initLocation({refresh: true, city, poi: true, save: false}).then(res=>{
          this.locationInfo = res 
        })
      })
    },
    onUnload() {
      uni.$off('selectCity')
    },
    computed: {
      pois() {
        return this.locationInfo.pois||[]
      }
    },
    methods: {
      getLocation(refresh=false) {
        initLocation({refresh, poi: true, save: !refresh}).then(res=>{
          this.locationInfo = res
          console.log('getLocation res locationInfo:',this.locationInfo)
        })
      },
      setSelectedLocationCur() {
        setSelectedLocation({...this.locationInfo})
        this.$x.navigator.back()
      },
      setSelectedLocationPoi(v) {
        if(!v.location||!v.location.lng||!v.location.lat) return 
        this.locationInfo.longitude = v.location.lng
        this.locationInfo.latitude = v.location.lat
        if(this.locationInfo.formatted_addresses)this.locationInfo.formatted_addresses.recommend = v.ad_info.province+v.ad_info.city+v.ad_info.district+v.title
        this.locationInfo.address = v.address
        setSelectedLocation({...this.locationInfo})
        this.$x.navigator.back()
      },
      goCitys() {
        this.$x.navigator.push('./citys')
      },
      search() {
        geocoderSearch(this.keyword, this.locationInfo.longitude, this.locationInfo.latitude).then(res=>{
          this.locationInfo.pois = res||[]
        })
      }
    }
  }
    </script>
    
    <style lang="scss" scoped>
    
    </style>